<template>
  <div id="ownerDevice">
    <el-card class="devices">
      <div slot="header" class="title">
        <i class="el-icon-miehuoqi deviceIcon"></i>
        <span>灭火器</span>
      </div>
      <DeviceReadonlyForm :data-form="devices[0]"/>
    </el-card>
    <el-card class="devices">
      <div slot="header" class="title">
        <i class="el-icon-yanwutanceqi1 deviceIcon"></i>
        <span>烟雾探测器</span>
      </div>
      <DeviceReadonlyForm :data-form="devices[1]"/>
    </el-card>
  </div>
</template>

<script>
import {defineComponent} from 'vue'
import DeviceReadonlyForm from "@/views/main/device/device-readonly-form.vue";

export default defineComponent({
  name: "owner-device",
  components: {DeviceReadonlyForm},
  data() {
    return {
      devices: [{}, {}]
      // dataForm: {
      //   id: 0,
      //   //[buildingId,floorId,houseId]
      //   house: 'test',
      //   available: true,
      //   type: '',
      //   model: '',
      //   manufacturer: '',
      //   purchaseDate: '',
      //   expireDate: '',
      //   note: ''
      // },
    }
  },
  methods: {
    // 获取数据
    getOwnerDevice() {
      this.$request.get('/device/device/getOwnerDevice', {
        params: {
        }
      }).then(res => {
        if (res && res.code === 200) {
          this.devices=res.ownerDevice
          console.log(res)
        } else {
          this.$message.error(res.msg)
        }
      })
    },
  },
  mounted() {
    this.getOwnerDevice();
  }
})
</script>

<style scoped>
#ownerDevice {
  display: flex;
  height: 100%;
  justify-content: space-around;
  gap: 10px;
  flex-wrap: wrap;
}

.devices {
  flex: 1;
  min-width: 300px;
}

.title {
  font-size: 20px;
  font-weight: bolder;
}

.deviceIcon {
  color: red;
  margin-right: 5px;
}
</style>
